<template>
	<view>
		<u-sticky bgColor="#fff" v-if="!isUnauthorized">
			<view class="blank20"></view>
			<view class="wrapper flex">
				<view class="text-gray mr15">
					当前显示：
				</view>
				<view class="mr15">
					<picker mode="multiSelector" :range="picker_range" :value="picker_value" @change="bind_picker_change">
						<view class="flex">
							<view class="flex-1 text-primary font-bold">
								{{y_m || '全部日期'}}
							</view>
							<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
						</view>
					</picker>
				</view>
				<view class="" @click="clearDate">
					<u-icon name="close-circle"></u-icon>
				</view>
				<view class="flex-1"></view>
				<view class="ml15">
					<u-button type="primary" size="small" text="新增" @click="add"></u-button>
				</view>
				
			</view>
			<view class="blank20"></view>
			<u-line></u-line>
			<view class="blank20"></view>
			<view class="flex justify-between">
				<template v-for="col in tableHd">
					<view :style="[col.style]">
						<view class="text-gray font-24 flex" v-if="col.key == 'date'" @click="bind_sort_date">
							<text class="ml15">{{ col.title }}</text>
							<u-icon name="arrow-upward" size="14" color="#675f91" v-if="sortType == 'asc'"></u-icon>
							<u-icon name="arrow-downward" size="14" color="#675f91" v-if="sortType == 'desc'"></u-icon>
						</view>
						<view class="text-center text-gray font-24" v-else>
							{{ col.title }}
						</view>
					</view>
				</template>
			</view>
			<view class="blank20"></view>
			<u-line></u-line>
		</u-sticky>

		<template v-if="isUnauthorized">
			<unauthorized></unauthorized>
		</template>
		<template v-else>
			<nodata v-if="loadingStatus == 'end' && list.length == 0"></nodata>
			<view class="bgw">
				<view class="" v-for="(v, i) in list" @click="inventoryEdit(v)">
					<view class="blank20"></view>
					<view class="flex justify-between">
						<template v-for="col in tableHd">
							<view :style="[col.style]">
								<view v-if="col.key == 'date'">
									<view class="ml15 font-bold">
										{{ v.date }}
									</view>
									<view class="blank10"></view>
									<view class="ml15">
										{{ v.time }}
									</view>
								</view>
								<view class="flex" style="justify-content: center" v-else-if="col.key == 'note'">
									<u-icon name="arrow-right" color="#999999" size="12"></u-icon>
								</view>
								<view class="" v-else-if="col.key == 'status'">
									<view class="flex" style="justify-content: center;">
										<u-tag :text="statusObj[v.status].text" plain size="mini" :type="statusObj[v.status].type"></u-tag>
									</view>
									
								</view>
								<view class="text-center text-ellipsis" v-else>
									{{ v[col.key] }}
								</view>
							</view>
						</template>
					</view>
					<view class="blank20"></view>
					<u-line dashed></u-line>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		stock_taking_record
	} from "@/common/api.js";
	import dataItem from "./components/data-item.vue";
	import unauthorized from "@/components/unauthorized.vue";
	import nodata from "@/components/nodata.vue";

	const _today = new Date();
	let _today_year = _today.getFullYear();
	let _today_month = _today.getMonth() + 1;
	let _today_day = _today.getDate();

	export default {
		components: {
			dataItem,
			unauthorized,
			nodata,
		},
		data() {
			return {
				role: null,
				allList:[],
				list: [],
				y_m:'',
				// y_m: _today_year + "-" + (_today_month > 10 ? _today_month : "0" + _today_month),
				tableConfig: {
					date: {
						title: "盘点日期",
						key: "date",
						style: {
							width: "200rpx",
						},
					},
					stock_taking_item_count: {
						title: "品种",
						key: "stock_taking_item_count",
						style: {
							width: "80rpx",
						},
					},
					name: {
						title: "盘点人",
						key: "name",
						style: {
							flex: 1,
						},
					},
					stock_taking_cost: {
						title: "盈亏",
						key: "stock_taking_cost",
						style: {
							width: "130rpx",
						},
					},
					status: {
						title: "状态",
						key: "status",
						style: {
							width: "60px",
						},
					},
					note: {
						title: "",
						key: "note",
						style: {
							width: "60rpx",
						},
					},
				},
				tableHd: [],
				sortType: "desc", //asc升序  desc降序
				sum: {}, //汇总数据
				isUnauthorized: false, //无权限
				loadingStatus: "",
				picker_value: [0, _today_month - 1],
				
				// 't1_scope ，“盘点泡围，( t2_taking ，“盘点 ),# ('t3_stock_in_out'，确认处理')，(t4_result'，已处理')]
				statusObj:{
					't1_scope':{
						text:'盘点泡围',
						type:'warning'
					},
					't2_taking':{
						text:'盘点',
						type:'warning'
					},
					't3_stock_in_out':{
						text:'确认处理',
						type:'warning'
					},
					't4_result':{
						text:'已处理',
						type:'success'
					},
				}
			};
		},
		filters: {},
		computed: {
			picker_range() {
				let arr = [
					[],
					[]
				];
				for (let i = 0; i < 3; i++) {
					arr[0].push(_today_year - i);
				}
				for (let i = 1; i < 13; i++) {
					if (i > 9) {
						arr[1].push(i);
					} else {
						arr[1].push("0" + i);
					}
				}
				return arr;
			},
		},
		methods: {
			clearDate() {
				this.y_m = '';
			},
			bind_picker_change(e) {
				let value = e.detail.value;
				this.picker_value = value;
				// console.log(this.picker_range);
				let new_y_m =
					this.picker_range[0][value[0]] + "-" + this.picker_range[1][value[1]];
				if (this.y_m != new_y_m) {
					this.y_m = new_y_m;
					this.updataList();
				}
			},
			updataList(){
				let list = [];
				if(this.y_m == ''){
					list = this.allList;
				}else{
					list = this.allList.filter(v=>v.datetime.startsWith(this.y_m));
				}
				this.list = this.sort_list(list);
			},
			bind_sort_date() {
				if (this.sortType == "desc") {
					this.sortType = "asc";
				} else {
					this.sortType = "desc";
				}
				this.list = this.sort_list(this.list);
			},
			sort_list(list) {
				list = list.sort((a, b) => {
					let a_time = new Date(a.datetime).getTime();
					let b_time = new Date(b.datetime).getTime();
					if (this.sortType == "desc") {
						return b_time - a_time;
					} else {
						return a_time - b_time;
					}
				});
				return list;
			},
			inventoryEdit(v) {
				this.nav(`/inventoryEdit/inventoryEdit?id=${v.id}&date=${v.date}`);
			},
			add() {
				this.nav("/inventoryFood/inventoryFood");
			},
			getData() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				this.loadingStatus = 'loading';
				this.y_m = '';
				stock_taking_record()
					.then((res) => {
						let list = [];
						(res.result || []).forEach((v) => {
							v.datetime = this.momentTZ(v.datetime);
							list.push({
								...v,
								date: v.datetime.split(" ")[0],
								time:v.datetime.split(" ")[1],
								name: v.create_uid[1]
							});
						});
						this.allList = JSON.parse(JSON.stringify(list));
						this.list = this.sort_list(list);
						let tableHd = [];
						for (let key in this.tableConfig) {
							tableHd.push(this.tableConfig[key]);
						}
						this.tableHd = tableHd;
						
						this.loadingStatus = 'end';
					})
					.finally(() => {
						this.loadingStatus = 'end';
						uni.hideLoading();
						uni.stopPullDownRefresh();
					});
			},
		},
		onLoad(d) {
			try {
				this.role = this.$store.getters.get_role;
				// let isUnauthorized = false;
				// if(!this.role['报表模块']['成本'].read && !this.role['报表模块']['销售'].read){
				// 	isUnauthorized = true;
				// }
				// this.isUnauthorized = isUnauthorized;
				this.userInfo = this.$store.getters.get_userInfo;
				this.getData();
			} catch (e) {
				uni.reLaunch({
					url: "/pages/login/login",
				});
			}
		},
		onShow() {
			uni.$off('refresh_inventory');
			uni.$once('refresh_inventory',()=>{
				this.getData();
			})
		},
		onReady() {},
		onPullDownRefresh() {
			this.getData();
		},
	};
</script>

<style lang="scss" scoped>
	.blank {
		height: 90upx;
	}

	.fixed-bottom {
		bottom: var(--window-bottom);
	}

	/deep/.item {
		padding: 20upx 20upx;
	}

	/deep/.food-box {
		margin: 0 20upx 0 20upx;
		background-color: #ededed;
		padding: 0;
	}

	/deep/.food-box .item {
		padding: 10upx 10upx;
	}

	/deep/.active.time-item-box {
		position: relative;
		// border: 1px solid #675f91;
		// border-top: 1px solid #675f91;
		border-bottom: 1px solid #675f91;
	}

	/deep/.time-box::before {
		// position: absolute;
		// content: ' ';
		// width: 2px;
		// height: 100%;
		// top: 0;
		// bottom: 0;
		// left: 2upx;
		// background-color: #675f91;
	}

	/deep/ .icon-btn {
		padding: 3px;
		border: 1px solid #d9d9d9;
		border-radius: 50%;
	}

	/deep/ .icon-btn.active {
		background-color: #675f91;
		border-color: #675f91;
	}
	.btn-date{
		// border: 1px solid #675f91;
		padding: 14upx 20upx 14upx 0;
		border-radius: 8upx;
		font-weight: bold;
		margin-right: 15upx;
	}
</style>